<template>
  <div
    class="scroll-wrapper"
    ref="listBox"
    @scroll="remPos"
  >
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id.toString()"
          :to="`article/${item.art_id.toString()}`"
        >
          <div class="article_item">
            <h3 class="van-ellipsis">{{item.title}}</h3>
            <div
              class="img_box"
              v-if="item.cover.images.length"
            >
              <van-image
                v-for=" (imgUrl,i) in item.cover.images"
                :key="i"
                lazy-load
                :class="item.cover.images.length==1?'w100':'w33'"
                fit="cover"
                :src="imgUrl"
              >
                <!-- 加载loading -->
                <template v-slot:loading>
                  <van-loading
                    type="spinner"
                    size="20"
                  />
                </template>
                <!-- 加载失败 -->
                <template v-slot:error>加载失败</template>
              </van-image>
            </div>
            <div class="info_box">
              <span>{{item.aut_name}}</span>
              <span>{{item.comm_count}}评论</span>
              <span>{{item.pubdate|relTime}}</span>

              <span
                class="close"
                @click.stop="openMore(item.art_id.toString())"
              >
                <van-icon name="cross"></van-icon>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <MoreActionView
      :articleId='articleId'
      v-model="showMore"
      @on-dislike='delArticle'
      @on-report='delArticle'
    />
  </div>
</template>

<script>
import MoreActionView from './more-action'
import { newsListAPI } from '../../../api/news'
export default {
  data () {
    return {
      list: [],
      // 加载状态
      loading: false,
      finished: false,
      refreshing: false,
      timestamp: +new Date(),
      scrollTop: 0, // 滚动的高度
      showMore: false, // 更多的 。
      articleId: ''// 文章id
    }
  },
  methods: {
    delArticle () { // 子组件点击不喜欢后删除文章
      var index = this.list.findIndex((item) => item.art_id.toString() === this.articleId)
      this.list.splice(index, 1)
    },
    async onLoad () { // 刷新列表
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }
      const { data } = await newsListAPI(this.channelID, this.timestamp)
      this.list.push(...data.results)
      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      // 如果返回的数据pre_timestamp为null 就证明没有数据了 然后就让finished为 true 证明数据加载完毕
      if (!data.pre_timestamp) {
        this.finished = true
      } else { // 否则就把后台返回的pre_timestamp赋值给原来的时间戳  用它再次去请求新的数据
        this.timestamp = data.pre_timestamp
      }
    },
    onRefresh () { // 下拉刷新
      // 清空列表数据
      this.finished = false
      // 下拉刷新后 要把下拉刷新的时间重新赋给时间戳 重新请求页面
      this.timestamp = +new Date()
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    remPos (e) { // 记录每次滚了多少
      // console.log(e.target.scrollTop)
      this.scrollTop = e.target.scrollTop
    },
    scrollPos () { // 外边调用这个函数 来记忆高度
      this.$nextTick(() => {
        this.$refs.listBox.scrollTop = this.scrollTop
      })
    },
    openMore (id) {
      // 文章id
      this.articleId = id
      // 打开more窗口
      this.showMore = true
    }
  },
  props: {
    channelID: Number
  },
  created () {

  },
  components: {
    MoreActionView
  }
}
</script>

<style lang="less" scoped>
//新闻列表
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 90px;
    }
    .w100 {
      width: 100%;
      height: 180px;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    font-size: 12px;
    span {
      padding-right: 10px;
      &.close {
        border: 1px solid #ddd;
        border-radius: 2px;
        line-height: 15px;
        height: 12px;
        width: 16px;
        text-align: center;
        padding-right: 0;
        font-size: 8px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
  }
}
</style>
